<template>
    <div class="main-con storeGoodsStorage">
        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">门店编号</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeNo" placeholder="请输入门店编号" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeName" placeholder="请输入门店名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">商品编号</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.productNo" placeholder="请输入商品编号"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">商品名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.productName" placeholder="请输入商品名称"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">订购时间</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.orderStart" type="datetime"
                        placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"></el-date-picker>
                </div>
                <div>~</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.orderEnd" type="datetime"
                        placeholder="请选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :clearable="false"></el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">入库时间</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.start" type="datetime"
                        placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"></el-date-picker>
                </div>
                <div>~</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.end" type="datetime"
                        placeholder="请选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :clearable="false"></el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店分组</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.storeGroupId" placeholder="请选择门店分组">
                        <el-option v-for="item in storeGroupOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group-con">
            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
            <el-button size="mini" type="primary" @click="handelSynchronous" :loading="syncloading">同步商品价格并推送</el-button>
            <div class="btn-group-item">
                <el-upload class="upload-demo" action="" :before-upload="handleImport" :show-file-list="false">
                    <el-button size="mini" type="primary">导入门店商品库存</el-button>
                </el-upload>
            </div>
            <el-button size="mini" type="primary" @click="downloadTemplate">下载导入入库记录模板</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="productNo" label="商品编号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="price" label="商品价格" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="orderStock" label="订购数量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stockCount" label="入库数量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="todayStockCount" label="今日总量" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="safeCount" label="安全库存" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="createTime" label="订购时间" width="160" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="updateTime" label="入库时间" width="160" align="center" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>
    </div>
</template>

<script>
import {
    queryStoreGoodsStorageInfo,
    queryStoreGrouping,
    importReport,
    pullPricesAndReGenerate
} from "@/common/service/salesManagement/storeGoodsStorage.js";
import mPagination from "@/components/m-pagination/m-pagination";
import { api } from "@/common/http/index.js";
export default {
    name: "storeGoodsStorage",
    data() {
        return {
            // 搜索条件
            formData: {
                storeNo: "", //门店编号
                storeName: "", //门店名称
                productNo: "", //商品编号
                productName: "", //商品名称
                orderStart: "", //订购开始时间
                orderEnd: "", //订购结束时间
                start: "", //入库开始时间
                end: "", //入库结束时间
                storeGroupId: "", //门店分组
                pageNum: 1,
                pageSize: 10
            },
            storeGroupOptions: [], //门店分组下拉框数据
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false, //表格加载动画
            syncloading: false //同步门店的加载动画
        };
    },
    created() {
        //初始化操作时间
        this.getTodayTimeSection();
        //初始化表格数据
        this._queryStoreGoodsStorageInfo();
        //初始化所有的门店分组
        this._queryStoreGroupingInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询社群商品信息表格数据
        _queryStoreGoodsStorageInfo() {
            this.loading = true;
            queryStoreGoodsStorageInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.list;
                    this.tableData.forEach((item, indedx) => {
                        item.stockCount = item.stockCount.toFixed(3);
                        item.price = item.price.toFixed(2);
                        item.todayStockCount = item.todayStockCount.toFixed(3);
                    });
                    this.total = res.totalCount;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryStoreGoodsStorageInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryStoreGoodsStorageInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryStoreGoodsStorageInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                storeNo: "",
                storeName: "",
                productNo: "",
                productName: "",
                orderStart: "",
                orderEnd: "",
                start: "",
                end: "",
                storeGroupId: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this.getTodayTimeSection();
            this._queryStoreGoodsStorageInfo();
        },
        //查询所有的门店分组信息
        _queryStoreGroupingInfo() {
            var data = {
                pageSize: 100
            };
            queryStoreGrouping(data)
                .then(res => {
                    this.storeGroupOptions = res.content;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        /*----------------------------计算当天的开始时间和结束时间----------------------------*/
        getTodayTimeSection() {
            var datesection = this.UTILS.getTodayStartAndEndDate();
            this.formData.start = datesection.beginTime;
            this.formData.end = datesection.endTime;
        },
        /*----------------------------导出操作----------------------------*/
        handleExport() {
            this.UTILS.exportUtil(
                api.exportStoreGoodsStorageInfo,
                this.formData
            );
        },
        /*----------------------------导出模板操作----------------------------*/
        downloadTemplate() {
            var data = {};
            this.UTILS.exportUtil(api.exportStoreGoodsStorageTemplate, data);
        },
        /*----------------------------导入门店商品库存操作----------------------------*/
        //点击导入
        handleImport(file) {
            this.$confirm("确定导入文件?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this._importReport(file);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消导入"
                    });
                });
        },
        //执行导入文件
        _importReport(file) {
            importReport(file)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "导入成功!"
                    });
                    this.formData.pageNum = 1;
                    this.formData.pageSize = 10;
                    this._queryStoreGoodsStorageInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------同步商品价格并推送操作----------------------------*/
        //点击同步
        handelSynchronous() {
            this.$confirm("您确定同步商品价格并推送吗？", "操作提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this._pullPricesAndReGenerate();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作"
                    });
                });
        },
        //执行同步方法
        _pullPricesAndReGenerate() {
            this.syncloading = true;
            this.loading = true;
            var data = {};
            pullPricesAndReGenerate(data)
                .then(res => {
                    this.syncloading = false;
                    this.loading = false;
                    this.$message({
                        message: res,
                        type: "success",
                        duration: 3000
                    });
                })
                .catch(err => {
                    this.syncloading = false;
                    this.loading = false;
                    this.$message.error(err.message);
                });
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>